<template>
  <div>
    <div class="list_banner">
      <p>留言</p>
    </div>
    <div class="container">
      <el-card>
        <div class="comments-from">
          <div class="comments-form-body">
            <div class="comments-form-user">
              <el-avatar
                v-if="userInfo === null"
                icon="el-icon-user-solid"
                size="large"
                style="background-color: #666"
                @click="handleLogin"
              ></el-avatar>
              <div
                v-else
                class="comments-form-user-avatar no-img-placeholder-colorful no-img-placeholder-horizon"
              >
                <img :src="userInfo.avatar" alt="用户头像" />
              </div>
              <span
                v-if="userInfo === null"
                class="comments-form-user-name"
                @click="handleLogin"
                style="color: #a7a1a5"
                >匿名用户
              </span>

              <span v-else class="comments-form-user-name"
                >{{ userInfo.nickname }}
              </span>
            </div>
            <div class="comments-form-content">
              <div class="comments-form-content-input">
                <textarea
                  v-model="formData.comment"
                  placeholder="说点什么吧..."
                  rows="5"
                ></textarea>
              </div>
            </div>
          </div>
          <div class="comments-form-footer">
            <div class="comments-form-footer-btns">
              <span
                >{{ formData.comment ? formData.comment.length : 0 }} /
                500</span
              >
            </div>
            <button @click="publish">发布</button>
          </div>
        </div>
      </el-card>
      <div class="message-list">
        <el-card
          v-if="messageList.length > 0"
          class="animate__animated animate__fadeInLeft"
        >
          <ul style="padding: 0" class="comment-list">
            <li class="comment" v-for="(ms, index) in messageList" :key="ms.id">
              <div class="comment_header">
                <el-avatar
                  v-if="ms.avatar !== ''"
                  :src="ms.avatar"
                  :size="50"
                ></el-avatar>
                <el-avatar v-else icon="el-icon-user-solid"></el-avatar>
                <div class="content_head">
                  <div class="naadr">
                    <span class="name">{{ ms.nickname }} </span>
                    <span class="date">{{ ms.create_time | dataFormat }}</span>
                  </div>
                  <div class="content">
                    {{ ms.content }}
                  </div>
                </div>
                <div class="comments_index">#{{ index + 1 }}</div>
              </div>
            </li>
          </ul>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import { addMessage, getMessage } from "@/request/api";
import { mapState } from "vuex";

export default {
  name: "",
  components: {},
  props: [""],
  computed: {
    ...mapState(["userInfo"]),
  },
  data() {
    return {
      islogin: true,
      formData: {
        comment: "",
      },
      message: {
        userId: -1,
        content: "",
      },
      messageList: [],
    };
  },
  created() {
    this.getMessageList();
  },
  mounted() {},
  methods: {
    async getMessageList() {
      const res = await getMessage();
      console.log(res);
      if (res.status == 200) {
        this.messageList = res.data.data;
        console.log(res.data);
      }
    },
    handleLogin() {
      this.$store.state.loginFlag = true;
    },
    async publish() {
      if (this.formData.comment == "") {
        this.$message({
          message: "发布留言不能为空！",
          type: "error",
          offset: 80,
        });
        retutn;
      }
      this.message.content = this.formData.comment;
      if (this.userInfo === null) {
        this.message.userId = -1;
        this.message.nickname = "匿名用户";
        this.message.avatar = "";
      } else {
        this.message.userId = this.userInfo.userId;
        this.message.nickname = this.userInfo.nickname;
        this.message.avatar = this.userInfo.avatar;
      }
      const { data: res } = await addMessage({
        message: this.message,
      });
      if (res.status === 200) {
        this.getMessageList();
        this.$message({
          message: "留言发表成功",
          type: "success",
          offset: 80,
        });
      } else {
        this.$message({
          message: "留言发表失败！",
          type: "error",
          offset: 80,
        });
      }
      this.formData.comment = "";
    },
  },
};
</script>
<style lang='less' scoped>
.list_banner {
  background: url("@/assets/image/banner_message.gif") no-repeat;

  position: relative;
  width: 100%;
  height: 200px;
}
.list_banner p {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  padding: 5px 10px;
  border-radius: 5px;
  background: #3333334d;
}

.container {
  margin-top: 15px;
  height: 32em;
  margin-bottom: 100px;
}
.comments-form {
  &-body {
    display: flex;
    align-items: flex-start;
  }
  &-user {
    flex: none;
    text-align: center;
    margin-right: 15px;
    &-avatar {
      height: 50px;
      width: 50px;
      border-radius: 50%;
      margin: 0 auto;
      img {
        height: 100%;
        width: 100%;
        border-radius: 50%;
        object-fit: cover;
      }
    }
    &-name {
      margin-top: 8px;
      display: block;
      width: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: bold;
      color: rgb(236, 149, 209);
    }
  }
  &-content {
    position: relative;
    flex: 1;
    border: 1px solid #ccc;
    &-input {
      position: relative;
      display: block;
      width: 100%;
      height: auto;
      &::before {
        content: "";
        position: absolute;
        display: block;
        width: 14px;
        height: 14px;
        top: 14px;
        left: -8px;
        border: 1px solid #ccc;
        border-width: 0 0 1px 1px;
        background-color: #fff;
        transform: rotate(45deg);
      }
      textarea {
        all: unset;
        display: block;
        height: 100%;
        width: 100%;
        padding: 10px;
        word-break: break-word;
        box-sizing: border-box;
      }
    }

    &:focus-within {
      border: 1px solid rgb(59, 197, 231);
    }
    &:focus-within ::before {
      border: 1px solid rgb(59, 197, 231);
      border-width: 0 0 1px 1px;
    }
  }
  &-footer {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 75px;
    button {
      width: 80px;
      height: 30px;
      padding: 3px;
      background: rgb(81, 228, 228);
      color: #fff;
      border: 0;
    }
    &-btns {
      z-index: 100;
      display: flex;
      align-items: center;
      color: #ccc;

      .emoji-picker {
        position: absolute;
        top: 40px;
        left: 0;
      }
    }
  }
}
.message-list {
  margin-top: 25px;
}
.message-list ul li {
  height: 150px;
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding: 10px;
  .comment_header {
    display: flex;
    .content_head {
      margin-top: 15px;

      margin-left: 15px;
      .naadr .name {
        font-size: 16px;
        color: rgb(236, 149, 209);
      }
      .naadr .date {
        margin-left: 15px;
        color: rgb(107, 104, 104);
      }
      .content {
        margin: 30px 0;
        min-height: 60px;
        text-align: justify;
        line-height: 1.75;
        word-break: break-all;
        font-size: 16px;
      }
    }
    .comments_index {
      font-weight: bold;
      font-size: 16px;
      color: rgb(19, 18, 18);
      justify-content: end;
      margin-top: 15px;
      margin: 0 15px 0 auto;
    }
  }
}
@media only screen and (max-width: 992px) {
  .comment_header {
    font-size: 14px;
  }
  .comments_index {
    display: none;
  }
}
</style>